<template>
  <view class="popularize">
    <u-form :model="form" ref="uForm" label-width="150">
      <u-form-item label="姓名" required prop="name">
        <u-input v-model="form.name" maxlength="10" placeholder="请输入姓名" />
      </u-form-item>
      <u-form-item label="身份证号" required prop="idCard">
        <u-input v-model="form.idCard" maxlength="18" placeholder="请输入身份证号" />
      </u-form-item>
      <u-form-item label="性别" required prop="sex">
        <u-radio-group v-model="form.sex">
          <u-radio :name="1">男</u-radio>
          <u-radio :name="2">女</u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item label="代理地区" required prop="description">
        <u-input v-model="form.description" maxlength="20" placeholder="请输入代理地区" />
      </u-form-item>
      <u-form-item label="手机号" required prop="telephone">
        <u-input v-model="form.telephone" maxlength="11" placeholder="请输入手机号" />
      </u-form-item>
      <u-form-item label="级别" required prop="level">
        <u-radio-group v-model="form.level">
          <u-radio v-for="(item, index) in radioList" :key="index" :name="item.value" :disabled="item.disabled">
            {{ item.name }}
          </u-radio>
        </u-radio-group>
      </u-form-item>
      <u-button type="success" @click="onSubmit">提交</u-button>
    </u-form>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        radioList: [{
            name: '省',
            value: 1,
            disabled: false
          },
          {
            name: '市',
            value: 2,
            disabled: false
          },
          {
            name: '区',
            value: 3,
            disabled: false
          }
        ],
        form: {
          name: '',
          sex: 1,
          idCard: '',
          description: '',
          telephone: '',
          level: ''
        },
        rules: {
          name: [{
            required: true,
            message: "请填写姓名",
          }],
          sex: [{
            required: true,
            message: "请选择性别",
          }],
          idCard: [{
              required: true,
              message: "请填写身份证号",
            },
            {
              validator: (rule, value, callback) => {
                return this.$u.test.idCard(value);
              },
              message: '身份证号不正确',
              // 触发器可以同时用blur和change，二者之间用英文逗号隔开
              trigger: ['change', 'blur'],
            }
          ],
          description: [{
            required: true,
            message: "请填写代理地区",
          }],
          telephone: [{
              required: true,
              message: "请填写联系电话",
            },
            {
              validator: (rule, value, callback) => {
                return this.$u.test.mobile(value);
              },
              message: '手机号码不正确',
              // 触发器可以同时用blur和change，二者之间用英文逗号隔开
              trigger: ['change', 'blur'],
            }
          ],
          level: [{
            required: true,
            message: "请选择级别",
          }],
        },
      }
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
    methods: {
      onSubmit() {
        this.$refs.uForm.validate(valid => {
          if (valid) {
            uni.showLoading({
              title: '提交中'
            })
            const data = { ...this.form }
            this.$http({
              url: "/my/postApplyAgent",
              data
            }).then((res) => {
              uni.hideLoading()
              if (res.status == 0) {
                uni.showModal({
                  title: '提交成功',
                  showCancel: false,
                  success() {
                    uni.navigateBack()
                  }
                })
              }
            });
          }
        });
      }
    }
  }
</script>

<style lang="scss">
  .popularize {
    padding: 20rpx;
  }
</style>
